<template>
    <transition name="yh-setting-fade">
        <div class="setting" :class="{ settingShow: settingShow }" v-show="settingShow">
            <div class="setting_dislog" @click="settingShow = false">

            </div>
            <div class="setting_inner">
                <div class="setting_header">
                    设置
                </div>
                <div class="setting_body">
                    <!-- <div class="left_shu"> 实时监测</div> -->
                    <div class="left_shu"> 全局设置</div>
                    <div class="setting_item">
                        <span class="setting_label">
                            是否进行自动适配<span class="setting_label_tip">(默认分辨率1920*1080)</span>:
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="isScaleradio" @change="(val) => radiochange(val, 'isScale')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>

                        </div>
                    </div>
                    <div class="left_shu"> 实时监测</div>
                    <div class="setting_item">
                        <span class="setting_label">
                            设备提醒自动轮询: <span class="setting_label_tip"></span>
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="sbtxradio" @change="(val) => radiochange(val, 'sbtxSwiper')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>

                        </div>
                    </div>
                    <div class="setting_item">
                        <span class="setting_label">
                            实时预警轮播:
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="ssyjradio" @change="(val) => radiochange(val, 'ssyjSwiper')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </div>
                    </div>

                    <div class="flex justify-center">
                        <!-- <el-button type="primary" round size="mini">确定</el-button> -->

                    </div>
                    <div class="left_shu"> 更新数据</div>
                    <input type="file" @change="handleFileChange" />
                    <div class="left_shu"> 更新时间</div>
                    <!-- <el-date-picker v-model="selectdate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                    </el-date-picker> -->
                    <el-select v-model="selectdate" placeholder="请选择日期">
                        <el-option v-for="item in dateAll" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import * as XLSX from 'xlsx';
import { EventBus } from '@/store/bus';
export default {
    components: {},
    data() {
        return {
            settingShow: false,
            sbtxradio: true,
            ssyjradio: true,
            isScaleradio: true,
            jsonData: null,
            selectdate: '',
            dateAll: []
        };
    },
    computed: {},
    methods: {
        init() {
            this.settingShow = true
        },
        radiochange(val, type) {
            this.$store.commit('setting/updateSwiper', { val, type })
            if (type === 'isScale') {
                // this.$router.go(0)
                // location.reload()
                // window.location.href=window.location.href+"?t="+Date.now()
            }
        },

        handleFileChange(event) {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = (e) => {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data)

                // 获取第一个工作表
                const firstSheetName = workbook.SheetNames[0]
                const worksheet = workbook.Sheets[firstSheetName]

                // 将工作表数据转换为 JSON 数组
                let jsonData = XLSX.utils.sheet_to_json(worksheet, {
                    raw: false, // 将所有单元格值解析为原始类型
                    dateNF: 'yyyy-mm-dd' // 指定日期格式
                })

                // 处理数据
                // console.log(jsonData)
                // 原始数据
                let originData = []
                // 原始数据处理
                originData = jsonData.map((item) => ({
                    date: item.开单日期,
                    productCode: item.产品编码,
                    productionQuantity: item.生产量,
                    productName: item.产品品名,
                    specification: item.规格型号
                }))
                const productdata = this.calculateDailyProduction(originData)
                this.dateAll = productdata.map(item => item.date).filter((value, index, self) => self.indexOf(value) === index)
                console.log(this.dateAll)
                EventBus.$emit('productdata', productdata)
                // this.$store.commit('excel/setData', productdata)
                // console.log(originData)
            };

            reader.readAsArrayBuffer(file);
        },
        calculateDailyProduction(productionData) {
            const dailyProduction = {}

            productionData.forEach((item) => {
                const { date, productCode, productionQuantity } = item
                const key = `${date}-${productCode}`

                // 如果 key 不存在，则创建新的对象，否则在原有数量上累加
                if (!dailyProduction[key]) {
                    dailyProduction[key] = {
                        ...item,
                        productionQuantity: Number(productionQuantity)
                    }
                } else {
                    dailyProduction[key].productionQuantity = Number(dailyProduction[key].productionQuantity) + Number(productionQuantity)
                }
            })

            return Object.values(dailyProduction)
        }
    },
    created() {
        this.$store.commit('setting/initSwipers')
        this.sbtxradio = this.$store.state.setting.sbtxSwiper,
            this.ssyjradio = this.$store.state.setting.ssyjSwiper,
            this.isScaleradio = this.$store.state.setting.isScale;
    },
    mounted() {
        document.body.appendChild(this.$el);

    },
    beforeDestroy() {
    },
    destroyed() {
        if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el);
        }
    },
    watch: {
        selectdate(newVal, oldVal) {
            if (newVal) {
                EventBus.$emit('newSelectDate', newVal)
            } else {
                EventBus.$emit('newSelectDate', new Date.now())
            }
        }
    }
}
</script>

<style lang='scss' scoped></style>